<template>
    <div>
        <NavTop/>
        
                <div class="common-layout">
                    <el-container>
                    <el-aside width="200px"><NavLeft @handle="dadHandle"/></el-aside>
                    <el-container>
                        <el-header><MySwiper/></el-header>
                        <el-main><MyList :list="filterlist"/></el-main>
                    </el-container>
                    </el-container>
                </div>
           
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import NavLeft from './components/NavLeft.vue';
import MyList from './components/MyList.vue';
import MySwiper from './components/MySwiper.vue';
import axios from 'axios';


export default{
    components:{
        NavTop,
        NavLeft,
        MyList,
        MySwiper
    },
    methods:{
        dadHandle(val){
            this.filterlist=this.list.filter(v=>v.cid==val)   //根据传递过来的商品类别在原始数据中进行筛选，获得符合条件的商品
            //获得筛选后的数组放到filterlist中.然后再通过夫传子传递给子组件
            console.log(this.filterlist)
        }
    },
    mounted(){
        axios.get('goodslist.json').then(res=>{
            this.list=res.data.goodslist
            this.filterlist=this.list
        })
    },
    data(){
        return{
            list:[],
            filterlist:[]
        }
    }
}

</script>

<style scoped>
.el-header{
     --el-header-padding:0;
        height:400px
    }

  
</style>